<template>
    <Modal v-model="chargeModal" class="pages-home-homeIndex-chargeModal" :mask-closable="false"
           @on-cancel="cancelModalBtn" class-name="vertical-center-modal">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>充值中心</span>
        </p>
        <div class="form-body">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="80">
                <Form-item label="用户名：" prop="name">{{profile.ANickName}}</Form-item>

                <Form-item label="充值金额：" prop="amount">
                    <Row>
                        <Col span="8">
                        <Input type="text" v-model="formValidate.amount" placeholder="请输入金额" number></Input>
                        </Col>
                        <Col span="2" style="text-align: center">
                        元</Col>
                    </Row>
                </Form-item>

                <Form-item label="支付方式" prop="payWay">
                    <Radio-group v-model="formValidate.payWay">
                        <Radio :label="1">支付宝</Radio>
                        <Radio :label="2">微信</Radio>
                    </Radio-group>
                </Form-item>

                <Form-item label="" prop="agreement" style="line-height: 20px">
                    <Checkbox v-model="formValidate.agreement">
                        <span>勾选默认同意接受《用户协议》</span>
                    </Checkbox>
                </Form-item>

            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" @click="handleSubmit('formValidate')">确认付款</Button>
        </div>
    </Modal>
</template>

<script>

    import getData from '../../../api/getData'

    export default {
        props: ['profile'],
        data: function () {

            const validateAmount = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('金额不能为空'));
                }else if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            };

            const validateAgreement = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请确认勾选用户协议'));
                } else {
                    callback();
                }
            };

            return {
                chargeModal: true,
                formValidate: {
                	amount: '',
                    payWay: 1,
                    agreement: false
                },
                ruleValidate: {
                    amount: [
                        { validator: validateAmount, trigger: 'blur' }
                    ],
                    agreement: [
                        { validator: validateAgreement, trigger: 'change' }
                    ]

                }
            }
        },
        methods: {
            cancelModalBtn: function () {
                this.chargeModal = false;
                this.$emit("close-modal");
            },

            handleSubmit (name) {
                var self = this;
                self.$refs[name].validate((valid) => {
                    if (valid) {
                        getData.post("chargeBalance", {
                        	payType: self.formValidate.payWay,
                            Monery: self.formValidate.amount
                        }).then(function (response) {
                            if(response.data.code == 0){

                                self.$Message.info( '充值...' );

                            }else{
                                self.$Message.warning( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                            }

                        }).catch(function (response) {
                            self.$Message.info('网络错误，请联系客服');
                        });
                    }
                })
            }
        },
        components: {}
    }
</script>

<style lang="scss">
    .pages-home-homeIndex-chargeModal {
        .form-body{
            padding-left: 25px;
            padding-top: 10px;
        }

        .ivu-form-item{
            margin-bottom: 15px;
        }

        /*.ivu-form-item-label{*/
            /*padding: 0;*/
            /*line-height: 20px;*/
        /*}*/

        /*.ivu-form-item-content{*/
            /*line-height: 20px;*/
        /*}*/
    }
</style>
